<template>
   <div class="SqlIo">
       <el-row class="header">
           <el-col :span="12" >
               <div class="titleText">
                    <p>IO读</p>
               </div>
               
           </el-col>
           <el-col :span="12" >
               <div class="titleText">
                   <p>IO写</p>
               </div>
               
           </el-col>
       </el-row>
       <el-row class="main" :gutter='20'>
           <el-col :span="12">
               <div id="ioRead" style="height: 100%">
                   <v-IoRead></v-IoRead>
               </div>
           </el-col>
           <el-col :span="12">
               <div id="ioWrite" style="height: 100%">
                   <v-IoWrite></v-IoWrite>
               </div>
           </el-col>
       </el-row>

   </div>
</template>>

<script>
// import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';
import vIoRead from './IoRead.vue'
import vIoWrite from './IoWrite.vue'
export default {
    data() {
        return {
            selectedMonID:'',
            timerName: 'NetLoad',
            timerEventName: 'timerNetLoad',
            timerInterval: 1000 * 30
        }
    },
    components:{
        vIoRead,vIoWrite
    },
    created() {
        bus.$on('selectedMonIDMysql', msg => {
            this.selectedMonID = msg;
            // this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
           


          this.initGetData();
            this.getData();
            bus.$emit('selectedMySQL', this.selectedMonID)
      
          
        });

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        // bus.$on(this.timerEventName, msg => {
        //     if (msg.isGetData) {
        //         let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
        //         this.getData();
        //         this.sendData.shift();
        //         this.sendData.push(this.ySend);
        //         this.receivData.shift();
        //         this.receivData.push(this.yReceiv);
        //         this.EChartsOption.xAxis.data.shift();
        //         this.EChartsOption.xAxis.data.push(axisData);
        //         this.NetLoad.setOption({
        //             xAxis: {
        //                 data: this.EChartsOption.xAxis.data
        //             },
        //             series: [
        //                 {
        //                     data: this.sendData
        //                 },
        //                 {
        //                     data: this.receivData
        //                 }
        //             ]
        //         })
        //     }
        // });
    },
    mounted() {
        
    },
    computed: {
        
    },
    methods: {
        initGetData(){
            
        },
        getData(){
            
        },
        
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
         bus.$off('selectedMonIDMysql')
    },
    // watch:{
    //     'EChartsOption': {
    //         handler: function () {
    //             this.drawNetLine();
    //         },
    //         deep: true
    //     }
    // }
}
</script>
<style scoped>
.header{
    height: 10%;
    margin-top: 2%;
    overflow: hidden;
    
}

.titleText>>> .el-form-item__label{
    color: rgb(248, 248, 239);
    line-height: 16px;
    font-size: medium;
    padding: 0 0 0 0;
}
.titleText>>> .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0px;
    margin-right: 0px;
}
.titleText{
    text-align: center;
    box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
    width: 60%;
    margin: 0 0 0 14% !important;
    border-radius: 20px;
    color: honeydew;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
</style>